<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="state.searchParams"
              @on-search="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :pagination="pagination"
            :fetch="fetch"
            :columns="state.columns"
            :operate="state.operate"
            :param="state.param"
            :toolbar="toolbar"
          />
        </a-card>
      </a-col>
    </a-row>
    <importModal
      :exportConfig="exportConfig"
      :visible="formState.importVisible"
      @close="closeImport"
    ></importModal>
    <a-modal
      v-model:visible="formState.uploadVisible"
      title="上传课程封面"
      okText="关闭"
      cancelText="取消"
      @ok="handleOk"
    >
      <div style="padding: 10px 20px">
        <a-upload
          style="margin-left: 20px"
          name="files"
          accept=".zip,.xls,.xlsx,.word"
          :customRequest="handleUpload"
        >
          <a-button type="primary">
            <a-icon type="upload" />{{ t("button.upload") }}</a-button
          >
        </a-upload>
      </div>
    </a-modal>
  </page-layout>
</template>
<script>
export default {
  name: "course-base-info"
}
</script>
<script setup>
import { message, Modal } from "ant-design-vue";
import {
  page,
  remove,
  upload,
  imports,
  templateUrl,
} from "@/api/module/courseBaseInfo";
import { onMounted, createVNode, ref, watch, reactive } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useRouter, useRoute } from "vue-router";
import importModal from "@/component/import/index.vue";
import useTable from "@/controller/useTable";
import { useI18n } from "vue-i18n";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import dictEnum from "@/const/dict";

const { t } = useI18n();

const tableRef = ref(null);
const router = useRouter();
const route = useRoute();

const dictLists = reactive({
  data: {},
});

const goNewSchool = () => router.push("/university/course-base-info/add");

const toolbar = [
  {
    code: "course-base-info:add",
    label: "新增",
    type: "primary",
    event: (selectedRowKeys) => {
      goNewSchool();
    },
  },
  {
    code: "",
    label: "批量导入",
    type: "primary",
    event: (selectedRowKeys) => {
      handleExport();
    },
  },
  {
    code: "",
    label: "导入课程封面",
    type: "primary",
    event: (selectedRowKeys) => {
      handleExportFace();
    },
  },
];

const formState = reactive({
  importVisible: false,
  uploadVisible: false,
});

const exportConfig = reactive({
  title: "课程管理",
  exportExcel: imports,
  templateUrl: templateUrl,
  downMethod: "GET",
  fileName: "课程管理导入模板",
  params: {},
});

const handleExport = () => {
  formState.importVisible = true;
};
const handleExportFace = () => {
  formState.uploadVisible = true;
};
const closeImport = (value) => {
  formState.importVisible = false;
  tableRef.value.reload();
};

const handleUpload = (data, type) => {
  const formData = new FormData();
  formData.append("file", data.file);
  upload(formData)
    .then((res) => {
      if (!res.success) {
        message.error({ content: "导入失败" });
        data.onError();
      } else if (res.success && res.data) {
        data.onSuccess(res.data);
        message.success({ content: "导入成功" });
      }
    })
    .finally(() => {
      state.isLoading = false;
    });
};

const { search, fetch, pagination, state } = useTable(
  page,
  [
    { dataIndex: "code", key: "code", title: "课程编码" },
    { dataIndex: "schName", key: "schName", title: "学校名称", width: 160 },
    { dataIndex: "disciplineName", key: "disciplineName", title: "学科类别" },
    { dataIndex: "courseCode", key: "courseCode", title: "课程代码" },
    {
      dataIndex: "courseName",
      key: "courseName",
      title: "课程名称",
      width: 160,
    },
    { dataIndex: "credit", key: "credit", title: "学分" },
    {
      dataIndex: "typeId",
      key: "typeId",
      title: "课程类型",
      cellRender: (record, data) => {
        const item = dictLists.data[dictEnum.COURSE_TYPE]
          ? dictLists.data[dictEnum.COURSE_TYPE].find((v) => v.value == data)
          : {};
        return item ? item.label : "";
      },
    },
    {
      dataIndex: "describesState",
      key: "describesState",
      title: "课程描述",
    },
    {
      dataIndex: "percurrIculumState",
      key: "percurrIculumState",
      title: "前置课程",
    },
  ],
  [
    {
      label: "详情",
      event: function ({ id }) {
        router.push({
          path: "/university/course-base-info/detail",
          query: { id: id },
        });
      },
    },
    {
      code: "course-base-info:remove",
      label: "删除",
      event: (item) => {
        Modal.confirm({
          title: "您是否确定要删除此数据?",
          icon: createVNode(ExclamationCircleOutlined),
          okText: "是",
          cancelText: "否",
          okType: "danger",
          onOk() {
            remove({ id: item.id }).then((res) => {
              if (res.code === 500) return message.error("删除失败");
              message.success("删除成功");
              tableRef.value.fetch({ current: 1 });
            });
          },
        });
      },
    },
  ],
  []
);
const onReset = function () {
  state.param = {};
};

const handleOk = () => {
  formState.uploadVisible = false;
};

watch(route, () => {
  tableRef.value.reload();
});
onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([dictEnum.COURSE_TYPE]);
  state.searchParams = [
    {
      span: 8,
      key: "schName",
      type: "input",
      label: "学校",
      placeholder: "请输入",
    },
    {
      span: 8,
      key: "disciplineName",
      type: "input",
      label: "学科类别",
      placeholder: "请输入",
    },
    {
      span: 8,
      key: "courseCode",
      type: "input",
      label: "课程代码",
      placeholder: "请输入",
    },
    {
      span: 8,
      key: "courseName",
      type: "input",
      label: "课程名称",
      placeholder: "请输入",
      hidden: true,
    },
    {
      span: 8,
      key: "credit",
      type: "input",
      label: "学分",
      placeholder: "请输入",
      hidden: true,
    },
    {
      span: 8,
      key: "typeId",
      type: "select",
      label: "课程类型",
      placeholder: "请输入",
      options: dictLists.data[dictEnum.COURSE_TYPE],
      hidden: true,
    },
  ];
});
</script>
